import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Breadcrumb, Space, Col, Row, Checkbox, DatePicker, } from 'antd';
import { useNavigate } from 'react-router-dom';
import service from '../../../../api';
import './AddDecrement.scss'
import { useSearchParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
const { RangePicker } = DatePicker;
const { TextArea } = Input;
function AddDecrement(props: any) {
    var dispatch = useDispatch()
    let id = useSelector((state: any) => state.id)
    var info = async () => {

        // var res3 = await service.decrement.decrement_info({ id })
        // console.log(res3.data);

    }
    useEffect(() => {
        info()
    }, [])
    var navigate = useNavigate()
    //返回
    const back = () => {
        navigate('/index/decrement')
    }
    //提交
    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        const content = '满' + formvalues.consume + '减' + formvalues.decrement
        const type = formvalues.coupon + "活动"
        console.log(type);
        const time = (formvalues.time[0].$y) + "/" + (formvalues.time[0].$M + 1) + "/" + (formvalues.time[0].$D) + " - " + (formvalues.time[1].$y) + "/" + (formvalues.time[1].$M + 1) + "/" + (formvalues.time[1].$D)
        if(id){
            var res = await service.decrement.decrement_list2({id:id, name: formvalues.name, content: content, type: type, states: formvalues.states, time: time, range: formvalues.range, })
        }else{
            var res = await service.decrement.decrement_add({ name: formvalues.name, content: content, type: type, states: formvalues.states, time: time, range: formvalues.range, })
        }
        dispatch({ type: 'REMOVE_ID'})
        navigate('/index/decrement')
    }
    return (
        <div className='adddecrement'>
            <div className="head">
                <div className="top">
                    <div className="bread">
                        <Breadcrumb>
                            <Breadcrumb.Item>营销</Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">满减满折</a>
                            </Breadcrumb.Item>
                            <Breadcrumb.Item>
                                <a href="">新建满X元减活动</a>
                            </Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    {id ? <h2>编辑满X元减活动</h2> : <h2>新建满X元减活动</h2>}

                </div>

            </div>
            <div className='form'>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}

                >
                    <Form.Item name='name' label="活动名称" >
                        <Input />
                    </Form.Item>
                    <Form.Item name='time' label="有效期">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item name="coupon" label="活动类型">
                        <Select
                            style={{ marginRight: 30 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '满减', label: '满减' },
                                { value: '折扣', label: '折扣' },
                                { value: '兑换', label: '兑换' }
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="states" label="状态">
                        <Select
                            style={{ marginRight: 30 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '未开始', label: '未开始' },
                                { value: '进行中', label: '进行中' },
                                { value: '已结束', label: '已结束' },
                            ]}
                        />
                    </Form.Item>

                    <Form.Item name='consume' label="消费满" >
                        <Input />
                    </Form.Item>
                    <Form.Item name='decrement' label="满减" >
                        <Input />
                    </Form.Item>
                    <Form.Item name='range' label="使用范围">
                        <Select>
                            <Select.Option value="全场通用">全场通用</Select.Option>
                            <Select.Option value="店铺通用">店铺通用</Select.Option>
                        </Select>
                    </Form.Item>


                    <Form.Item label="操作">
                        <Button htmlType="submit" style={{ marginRight: 30 }}>
                            提交
                        </Button>
                        <Button htmlType="button"
                            onClick={back}
                        >
                            返回
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default AddDecrement;
